<template>
	<view class="withdraw">
		<base-header height="400">
			<base-navbar back-color="#fff">
				<view class="header">
					<view class="txt-xh" style="text-align: center;">
						<view class="h3">
							¥{{withdrawable_amount}}
						</view>
						<text>可提现金额</text>
						<!-- <text class="s2">?</text> -->
					</view>
				</view>
			</base-navbar>
		</base-header>

		<view class="boe">
			<view class="m-about">
				<view class="h3">
					提现金额
				</view>
				<view class="num">
					<!-- <view class="desc">￥</view> <text>每日最高提现</text> -->
					<input class="inp" v-model="price" placeholder="请输入提现金额" type="number">

				</view>
				<view class="boe">
					<text>提现至</text>
					<text class="s1" @click="onSelect()"
						v-if="account_id > 0">{{accountInfo.bank_name}}({{accountInfo.account}})</text>
					<text class="s1" @click="onSelect()" v-else>请选择账户</text>
				</view>
				<view class="g-queding-kx" :style="{backgroundColor: themeColor.theme}">
					<view class="txt">
						<view class="s1" @click="save">确认提现</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="txt-xh1">
				<view class="tit">

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const selectRef = ref(null);

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		title: "会员提现",
		withdrawable_amount: '0',
		limit: 100, //提现限额
		accountInfo: {},
		account_id: 0,
		price: undefined,
		user_type: 2, //0=商户，1=门店，2=会员，3=代理
		record_type: 0, //1=奖励余额，2=充值余额，3=佣金余额，4=红包余额，5=积分余额
	});

	onLoad((opt) => {
		if (opt.hasOwnProperty('user_type')) {
			state.user_type = opt.user_type;
		}
		if (opt.hasOwnProperty('record_type')) {
			state.record_type = opt.record_type;
		}
		uni.$on('select_account', (res) => {
			state.account_id = res.account_id
			getAccountInfo();
		})
		initData();
		getProfit()
		getDefaultAccount()
	});

	onReachBottom((e) => {
		console.log("上拉加载更多")
	})

	onPullDownRefresh((e) => {
		console.log("下拉刷新")
	})

	function initData() {
		//0=商户，1=门店，2=会员，3=代理
		if (state.user_type == 1) {
			state.title = '商家提现';
		} else if (state.user_type == 2) {
			state.title = '会员提现';
		} else if (state.user_type == 3) {
			state.title = '代理提现';
		}
	}

	function getProfit() {
		request.get('member/getMemberEarnings', {
			user_type: state.user_type,
			record_type: state.record_type,
		}).then(res => {
			console.log('提现信息', res);
			state.withdrawable_amount = res.data.withdrawable_amount;
			state.limit = res.data.withdrawal_limit;
			if (parseFloat(state.withdrawable_amount) > parseFloat(state.limit)) {
				state.price = state.withdrawable_amount;
			}
		})
	}

	function onSelect() {
		pageRoute('/pages/users/withdraw/account?type=select');
	}

	function getDefaultAccount() {
		request.get('memberpayment/getDefaultAccount').then(res => {
			console.log('默认银行卡', res);
			state.accountInfo = res.data;
		})
	}

	function getAccountInfo() {
		request.get('memberpayment/getAccountInfo', {
			id: state.account_id,
		}).then(res => {
			console.log('银行卡信息', res);
			state.accountInfo = res.data;
		})
	}

	function save() {
		if (!state.price) {
			uni.showToast({
				title: "请输入提现金额",
				icon: 'error'
			});
			return false
		}
		if (parseFloat(state.price) < parseFloat(state.limit)) {
			uni.showToast({
				title: "最低提现" + state.limit,
				icon: 'error'
			});
			return false
		}
		if (parseFloat(state.price) > parseFloat(state.withdrawable_amount)) {
			uni.showToast({
				title: "提现金额不能超过可提现金额",
				icon: 'error'
			});
			return false
		}
		if (state.account_id == 0) {
			uni.showToast({
				title: "请选择银行卡",
				icon: 'error'
			});
			return false
		}

		request.post('memberpayment/createCash', {
			price: state.price,
			account_id: state.account_id,
			user_type: state.user_type,
			record_type: state.record_type,
		}).then(res => {
			console.log('提现', res);
			if (res.code == 1) {
				uni.showToast({
					title: res.msg,
					icon: 'success'
				});
				getProfit();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error'
				});
			}
		})
	}

	function isInteger(value) {
		return typeof value === 'number' && parseInt(value, 10) === value;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}
	const {
		themeColor,
		title,
		withdrawable_amount,
		limit,
		accountInfo,
		account_id,
		price,
		user_type,
		record_type,
	} = toRefs(state);
</script>

<style lang="scss">
	.withdraw {
		.header {
			position: relative;
			height: 400rpx;

			.txt-xh {
				position: absolute;
				width: 200rpx;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);

				.h3 {
					font-weight: bold;
					color: #fff;
					margin-bottom: 5rpx;
					font-size: 52rpx;
				}
			}
		}

		.boe {
			.m-about {
				margin: 0 40rpx;
				padding: 20rpx 40rpx;
				margin-top: -80rpx;
				background-color: #fff;
				border-radius: 10rpx;
				position: relative;
				z-index: 99;
				box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
				margin-bottom: 140rpx;

				.h3 {

					font-size: 28rpx;
					margin-bottom: 25rpx;
				}

				.num {
					margin-bottom: 35rpx;
					border-bottom: 1px solid #f2f2f2;

					.inp {}
				}

				.boe {
					overflow: hidden;
					margin-bottom: 100rpx;
					color: #666666;
					font-size: 24rpx;

					.s1 {
						float: right;
					}

					text {
						float: left;
					}
				}

				.g-queding-kx {

					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					border-radius: 10rpx;
					color: #fff;
					width: 100%;

					.txt {
						.s1 {}
					}
				}
			}
		}

		.main {
			.txt-xh1 {
				padding: 0 60rpx;

				.tit {}
			}
		}
	}
</style>